<template>
	<view class="container">
		<uni-forms ref="customForm">
    <!--  选择房间  -->
      <uni-section title="一、选择宿舍" type="line" padding>
        <uni-data-picker :localdata="roomList" popup-title="请选择宿舍" @change="onchange"></uni-data-picker>
      </uni-section>
       <!--   评价项打分   -->
      <uni-section title="二、内务卫生检查评分" type="line" padding class="score-content">
        <template v-for="(itemType, typeIndex) in roomEvalItemList" >
          <uni-section  :title="itemType.itemTypeId +'、'+ itemType.itemTypeName" :key="itemType.itemTypeId" class="top-item">
            <view class="example">
              <template v-for="(item, itemIndex) in itemType.itemList">
                <uni-section :title="'('+item.itemId+')、'+item.itemContent" class="item-padding" type="circle">
<!--                  <uni-rate :max="item.maxScore"  v-model="answerListData[item.itemId].optionScore"/>-->
                  <uni-number-box :min="0" :max="item.maxScore" v-model="answerListData[item.itemId].optionScore"></uni-number-box>
                </uni-section>
              </template>
            </view>
          </uni-section>
        </template>
      </uni-section>
		<view class="example btn_submit">
			<button type="primary" @click="goProStage()">提交</button>
		</view>
		</uni-forms>
	</view>
</template>
<script>
import { roomEvalItemList } from '@/../utils/roomEvalItemList';
import {getRoomTree,insertScore} from "@/api/roomEval";
export default {
	onShow() {
	},
	onLoad: function () {
    console.log("onload")
	},
  created() {
    // 获取房间树列表
    getRoomTree().then(response => {
      this.roomList = response.data
    });
    // 初始化 answerListData，确保每个问题都有对应的字段
    this.initAnswerListData();
  },
	data() {
		return {
      roomEvalItemList,
      answerListData:{},
      postData:{
        fjhBh:null,
        fjName:null,
        answerList:[]
      },
      roomList: []
		}
	},
	methods: {
    // 初始化答案
    initAnswerListData(){
      this.roomEvalItemList.forEach(itemType => {
        itemType.itemList.forEach(item => {
          let answerItem = {
            itemTypeId : itemType.itemTypeId,
            itemTypeName : itemType.itemTypeName,
            itemId : item.itemId,
            itemContent : item.itemContent,
            maxScore : item.maxScore,
            optionScore : item.maxScore,
          };
          this.$set(this.answerListData, item.itemId, answerItem);
        });
      });
      console.log(this.answerListData);
    },
    // 房间选择变化
    onchange(e) {
      const valueList = e.detail.value
      console.log(valueList)
      // 房间编号
      this.postData.fjhBh = valueList[2].value;
      // 房间名字
      let fjName = "";
      for (let i = 0; i < valueList.length; i++) {
        fjName += valueList[i].text;
      }
      this.postData.fjName = fjName;
    },
    // 下一步按钮提交
    goProStage() {
      console.log(this.postData)
      // 验证是否选择了房间号
      if(this.postData.fjhBh === null){
        uni.showToast({
          title: '请选择房间',
          icon: 'none',
          duration: 1000
        });
        return;
      }
      // 提交评分
      this.postData.answerList = Object.values(this.answerListData);
      insertScore(this.postData).then(response => {
        // 显示成功提示
        uni.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 2000
        });
        // 跳转到评价成功页面
        uni.redirectTo({
          url: `/pages/roomEval/success?score=${response.data}`
        })
      });
    },
	}
}
</script>

<style lang="scss">
	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
	.uni-forms-item {
		margin-bottom: 10px !important;
	}
	.btn_submit {
		padding-bottom: 30px;
	}
  ::v-deep .uni-data-checklist .checklist-group{
    display: block !important;
    padding-top:5px;
  }
  ::v-deep .uni-data-checklist .checklist-group .checklist-box{
    padding:3px;
  }
  ::v-deep .item-padding .uni-section-header{
    padding:2px 5px !important;
  }
  ::v-deep .top-item > .uni-section-header{
    margin-top:-25px !important;
  }
  ::v-deep .top-item > .uni-section-content{
    padding:0px 5px !important;
  }
  ::v-deep .score-content > .uni-section-content{
    padding-top:35px !important;
  }

</style>